<!-- 封装pagination相关方法 -->

<template>
  <el-pagination
    :current-page="props.page"
    :page-size="props.limit"
    layout="total, sizes, rev, pager, next, jumper"
    :total="props.listCount"
    @current-change="handleCurrentChange"  
    @size-change="handleSizeChange"
  >

  </el-pagination>
</template>
<script lang='ts' setup>
const props = defineProps({
  page: { type: Number, default: 1 },
  limit: {
    // 每页大小
    type: Number,
    default: 10
  },
  listCount: {
    // 总条数
    type: Number,
    default: 0
  },
  loadList: {
    type: Function,
    default: () => {}
  }
})
const emits = defineEmits(['update:page', 'update:limit'])


const handleCurrentChange = (page: number) => {
  emits('update:page', page)
  props.loadList()
}

const handleSizeChange = (sizes: number) => {
  emits('update:limit', sizes)
  emits('update:page', 1)
  props.loadList()
}

</script>
<style lang='scss' scoped>

</style>